<template>
	<view class="wrapper" @click="changeWrapper">
		<button class="btn" @click="changeClick">剑来</button>
		<view class="xx">
			快来收下
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onShow() {
			// console.log(  this.data )
		},
		methods: {
			changeClick() {
				console.log('丢你')
			},
			changeWrapper(clickInfo) {
				this.getBoundingClientRect('.btn').then( res => {
					res.boundingClientRect.forEach((item) => {
					  const isHit = this.isClickTrackArea(clickInfo, item, res.scrollOffset);
					  console.log('捕获===', isHit )
					});
				})
			},
			isClickTrackArea(clickInfo, boundingClientRect, scrollOffset) {
				if (!boundingClientRect) return false;
				const { x, y } = clickInfo.detail; // 点击的x y坐标
				  const { left, right, top, height } = boundingClientRect;
				  const { scrollTop } = scrollOffset;
				  if (left < x && x < right && scrollTop + top < y && y < scrollTop + top + height) {
					return true;
				  }
				  return false;
			},
			getBoundingClientRect (element) {
			  return new Promise((reslove) => {
			    const query = wx.createSelectorQuery();
			    query.selectAll(element).boundingClientRect();
			    query.selectViewport().scrollOffset();
			    query.exec(res => reslove({ boundingClientRect: res[0], scrollOffset: res[1] }));
			  });
			}
		}
	}
</script>

<style lang="scss" scoped >
	.btn {
		margin-top: 50rpx;
	}
</style>
